<template>
  <div @click="clickHandle" class="index">
    <div class="search">
      <div @click="toMappage">{{cityName}}</div>
      <div @click="toSearch">
        <input type="text" placeholder="搜索商品">
        <span class="icon"></span>
      </div>
    </div>
    <div class="swiper">
      <swiper class="swiper-container" indicator-dots="true" autoplay="true" interval="3000" circular="true" duration="500">
        <block v-for="(item, index) in banner" :key="index">
          <swiper-item class="swiper-item">
            <image :src="item.image_url" class="slide-image" />
          </swiper-item>
        </block>
      </swiper>
    </div>
    <div class="channel">
      <div @click="categoryList(item.id)" v-for="(item, index) in channel" :key="index">
        <img :src="item.icon_url" alt="">
        <p>{{item.name}}</p>
      </div>
    </div>
    <div class="brand">
      <div @click="tobrandList" class="head">
        品牌制造商直供
      </div>
      <div class="content">
        <div @click="branddetail(item.id)" v-for="(item, index) in brandList" :key="index">
          <div>
            <p>{{item.name}}</p>
            <p>{{item.floor_price}}元起</p>
          </div>
          <img :src="item.new_pic_url" alt="">
        </div>
      </div>
    </div>
    <div class="newgoods">
      <div @click="goodsList('new')" class="newgoods-top">
        <div class="top">
          <p>新品首发</p>
          <p>查看全部</p>
        </div>
      </div>
      <div class="list">
        <ul>
          <scroll-view class="scroll-view" :scroll-x="true">
            <li @click="goodsDetail(item.id)" v-for="(item, index) in newGoods" :key="index">
              <img :src="item.list_pic_url" alt="">
              <p>{{item.name}}</p>
              <p>{{item.goods_brief}}</p>
              <p>￥{{item.retail_price}}</p>
            </li>
          </scroll-view>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import * as HomeApi from '@/api/home'
import AMapFile from '@/utils/lib/amap-wx'
import { mapState, mapMutations } from 'vuex'
// import './style.scss';
export default {
  onShow() {
  },
  computed: {
    ...mapState('home', {
      cityName: state => state.cityName
    })
  },
  data () {
    return {
      banner: [],
      channel: [],
      brandList: [],
      newGoods: [],
      hotGoods: [],
      topicList: [],
      newCategoryList: [],
      userInfo: {
        nickName: 'mpvue',
        avatarUrl: 'http://mpvue.com/assets/logo.png'
      }
    }
  },
  components: {
  },
  mounted() {
    this.getCityName();
    this.getData();
  },
  methods: {
    ...mapMutations('home', {
      setLocation: 'SET_LOCATION'
    }),
    // 获取 高德定位授权
    toMappage() {
      const that = this;
      // 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.record" 这个 scope
      wx.getSetting({
        success(res) {
          //如果没有同意授权,打开设置
          if (!res.authSetting['scope.userLocation']) {
            wx.openSetting({
              success: (res) => {
                console.log(res)
                that.getCityName();
              }
            });
          } else {
            // wx.navigateTo({
            //   url: '/pages/mappage/main'
            // });
          }
        }
      });
    },
    // 高德 获取 城市
    getCityName() {
      const that = this;
      const myAmapFun = new AMapFile.AMapWX({
        key: '0c88ca8524a6b0c474432bb0328130ac'
      }); // 高德-微信小程序key
      myAmapFun.getRegeo({
        success: function (resData) {
          // console.log('myAmapFun', resData);
          that.setLocation(resData[0].regeocodeData);
        },
        fail: function (error) {
          console.log(error);
          //如果用户拒绝授权
          that.cityName = '南昌市';
          that.setLocation({ addressComponent: { city: '南昌市' } });
        }
      });
    },
    toSearch() {
      wx.navigateTo({
        url: '/pages/search/main'
      });
    },
    getData() {
      const toParams = { id: 1 }
      HomeApi.getHomeList(toParams).then((res) => {
        this.banner = res.data.banner;
        this.channel = res.data.channel;
        this.brandList = res.data.brandList;
        this.newGoods = res.data.newGoods;
        this.hotGoods = res.data.hotGoods;
        this.topicList = res.data.topicList;
        this.newCategoryList = res.data.newCategoryList;
      }).catch((error) => { console.log(error) })

      // HomeApi.getHomeList({
      //   success: function (resData) {
      //     //成功回调
      //     console.log(resData);
      //   },
      //   fail: function (error) {
      //     //失败回调
      //     console.log(error);
      //   }
      // })
    },
    clickHandle (ev) {
      console.log('clickHandle:', ev)
      // throw {message: 'custom test'}
    }
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style lang='scss' scoped>
  @import "./style.scss";
</style>
